<script setup>
import {ref} from "vue";
import router from "../router.js";
const imageurl=[
    'https://th.bing.com/th/id/OIP.nOL1dIMqrSUC4cX6bn4iZAHaEK?rs=1&pid=ImgDetMain',
    'https://th.bing.com/th/id/R.e6d1302099a1f29923ee023febd2ba1e?rik=02uIcOh5ag1jaQ&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f71%2f8471.jpg&ehk=EXjfKevw0MmzhZwy1RV%2b79gugxZVNloDE9%2fU0AKvvpk%3d&risl=&pid=ImgRaw&r=0',
    'https://th.bing.com/th/id/R.1aed7f19dad5f368ae9dfd846ec29751?rik=qlzg%2bFkwjp7uAg&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f72%2f2272.jpg&ehk=rGXRA237YZVe%2bQFJc8vMg9GAPLT9hUv8aFF0Ty9vfaQ%3d&risl=&pid=ImgRaw&r=0',
    'https://th.bing.com/th/id/OIP.g8_DOH7dxp55fdnClwqJmgHaEK?rs=1&pid=ImgDetMain']

const imageurl1 = ref('https://img.ixintu.com/download/jpg/202004/3162b20419ec35b188348ef55bcf21ac_800_1422.jpg!con0');

const Toboard=async ()=>{
 await router.push("/board")
}
const Tooderfood=async ()=>{
  await router.push("/orderfood")
}
const Touserdetails=async ()=>{
  await router.push("/userdetails")
}
const Torecharge=async ()=>{
  await router.push("/recharge")
}

</script>

<template>

  <div class="common-layout">
    <el-container  class="index-container">

      <el-container>
        <div class="header-container">
          <el-header class="header-text">xx网咖</el-header>
        </div>
        <el-main> <el-row :gutter="20" class="el-row">
          <el-col :span="6" :offset="6" >
            <el-button type="primary" round class="index-button" @click="Toboard">上机</el-button>
          </el-col>
          <el-col :span="6" :offset="2" class="el-col">
            <el-button type="success" round  class="index-button" @click="Tooderfood">点餐</el-button>
          </el-col>
        </el-row>
          <el-row :gutter="20" class="el-row">
            <el-col :span="6" :offset="6">
              <el-button type="warning" round  class="index-button" @click="Torecharge">充值</el-button>
            </el-col>
          <el-col :span="6" :offset="2">
            <el-button type="danger" round  class="index-button" @click="Touserdetails">设置</el-button>
            </el-col>
          </el-row></el-main>
        <el-footer class="el-index-footer">
          <div class="block text-center">
          <el-carousel height="150px" motion-blur>
            <el-carousel-item v-for="(imageurl, index) in imageurl" :key="index" >
              <img :src="imageurl" :alt="'Image ' + (index + 1)" style="width: 100%; height: 100%;" />
            </el-carousel-item>
          </el-carousel>
        </div></el-footer>
      </el-container>
    </el-container>
  </div>

</template>



<style scoped>
.el-row {
  margin-bottom: 20px;
height: 140px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.grid-content ep-bg-purple{
  background-color: white;
}
.index-container{
  height: 650px;
width: 1200px;
  margin-left: 200px;


}
.el-index-footer{
 height: 200px;
}
.index-button{
  width: 295px;
  height: 150px;

}
.header-container {
  display: flex;
  justify-content: center; /* 在水平方向上居中显示 */
  align-items: center; /* 在垂直方向上居中显示 */
  height: 100px; /* 根据您的需求设置高度 */
}

.header-text {
  font-family: "Your_Artistic_Font", sans-serif; /* 使用您的艺术字体 */
  font-size: 36px; /* 设置字体大小 */
}
</style>